<script setup name="Profile" lang="ts">
import userAvatar from "./userAvatar.vue";
import userInfo from "./userInfo.vue";
import resetPwd from "./resetPwd.vue";
import { PROFILE_TANBS_ENUM } from "./const";

// 用户信息
const userProfile = ref<UserRecord>({});

// 角色
const roleGroup = ref("");

// 岗位
const postGroup = ref("");

// 基本资料 tabs 激活项
const activeTab = ref(PROFILE_TANBS_ENUM.info);

/** 获取用户信息 */
function getUser() {
  getUserProfileApi().then(response => {
    userProfile.value = response.data;
    roleGroup.value = response.roleGroup;
    postGroup.value = response.postGroup;
  })
}

getUser();
</script>

<template>
  <div class="app-container">

    <el-row :gutter="20">
      <!--个人信息-->
      <el-col :span="6" :xs="24" class="col-left">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div class="avatar-box">
            <user-avatar />
          </div>

          <div class="info-box">
            <div class="info-item">
              <div class="info-item-left">
                <icon-svg icon-name="user" />
                用户名称
              </div>
              <div class="info-item-rigth">
                {{ userProfile.userName }}
              </div>
            </div>
            <div class="info-item">
              <div class="info-item-left">
                <icon-svg icon-name="phone" />
                手机号码
              </div>
              <div class="info-item-rigth">
                {{ userProfile.phonenumber }}
              </div>
            </div>
            <div class="info-item">
              <div class="info-item-left">
                <icon-svg icon-name="email" />
                用户邮箱
              </div>
              <div class="info-item-rigth">
                {{ userProfile.email }}
              </div>
            </div>
            <div class="info-item">
              <div class="info-item-left">
                <icon-svg icon-name="tree" />
                所属部门
              </div>
              <div class="info-item-rigth">
                {{ userProfile.dept?.deptName }}
              </div>
            </div>
            <div class="info-item">
              <div class="info-item-left">
                <icon-svg icon-name="peoples" />
                所属角色
              </div>
              <div class="info-item-rigth">
                {{ roleGroup }}
              </div>
            </div>
            <div class="info-item">
              <div class="info-item-left">
                <icon-svg icon-name="date" />
                创建日期
              </div>
              <div class="info-item-rigth">
                {{ userProfile.createTime }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24" class="col-right">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" :name="PROFILE_TANBS_ENUM.info">
              <user-info :user="userProfile" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" :name="PROFILE_TANBS_ENUM.resetPwd">
              <reset-pwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.box-card{
  margin-bottom: 12px;
}

.col-left {
  min-width: 280px;
}

.col-right {
  flex: 1;
  width: calc(100% - 280px);
}

.avatar-box {
  text-align: center;
}

.info-box {

  .info-item {
    display: flex;
    line-height: 25px;
    border-bottom: 1px solid #e7eaec;
    padding: 11px 0;

    .info-item-left {
      margin-right: auto;
    }
  }
}
</style>